<template>
    <div class="app-container">
        <el-form ref="queryForm" size="small" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="时间" prop="timeGroup">
                        <el-date-picker v-model="timeGroup" type="daterange" :picker-options="pickerOptions" editable
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">

                    <el-form-item label="部门归属" prop="deptId">
                        <treeselect v-model="deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门归属"
                            :default-expand-level="4" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table v-loading="loading" :data="custinfoList" fit style="width: 100%" show-summary :summary-method="getSummaries">
            <el-table-column label="姓名" align="center" prop="nick_name" min-width="3%" />
            <el-table-column label="部门归属" align="center" prop="dept_name" min-width="3%" />
            <el-table-column label="数据总量" align="center" prop="total_count" min-width="3%" />
            <el-table-column label="公共池重复数" align="center" prop="public_count" min-width="3%">
              <template slot-scope="scope">
                <span>{{ scope.row.public_count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户经理库重复数" align="center" prop="public_count" min-width="3%">
              <template slot-scope="scope">
                <span>{{ scope.row.public_count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="二维码推广数" align="center" prop="qrcode_count" min-width="3%" />
            <el-table-column label="实际计算量" align="center" prop="net_count" min-width="3%" />
        </el-table>
        <!-- 查看客户列表 -->
        <el-dialog :title="title" :visible.sync="open" class="dialogCust" width="96%" :fullscreen="modalverbs" append-to-body :modalverbs="modalverbs" :destroy-on-close="modalverbs">
          <cust-info-list :form.sync="form"></cust-info-list>
        </el-dialog>
    </div>
</template>

<script>
import { custdebtlimitdataStatics } from "@/api/crmsys/report/userCostStatics";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { childrenAlldeptTree } from "@/api/system/user";
import CustInfoList from "@/components/crmSys/custInfoList";
export default {
    name: "UserCostStatics",
    dicts: [
        "crm_dept_level"
    ],
    components: { Treeselect, CustInfoList},
    data() {
        return {
            open:false,
            modal:false,
            title:'客户列表',
            form:{},//通过from去子组件查询列表数据
            deptId: null,
            timeGroup: null,
            // 遮罩层
            loading: false,
            custinfoList: [],
            // 部门归属树选项
            deptOptions: [],
            modalverbs:true,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    // 生命周期 - 创建完成（访问当前this实例）
    created() {
        this.getDeptTree();
        this.timeGroup = [this.getNowFormatDate(), this.getNowFormatDate()]
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 生命周期 - 挂载完成（访问DOM元素）
    mounted() {

    },
    // methods方法
    methods: {
      /** 总计 */
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (column.property !== 'dept_name') {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index];
          }
        });
        return sums
      },
        handleQuery() {
            this.getList();
        },
        resetQuery() {
            this.deptId = null;
            this.timeGroup = null;
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {
            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        getList() {
            if (this.timeGroup == null || this.timeGroup == "") {
                //必须选择时间
                this.$message.error("请选择要查询的时间！");
                return;
            }

            this.loading = true;
            let deptid = this.deptId == null ? -1 : this.deptId;

            custdebtlimitdataStatics(this.timeGroup, deptid).then(response => {
                this.custinfoList = response.rows;

                console.log(this.custinfoList)
            });
            this.loading = false;
        },
      custleveldataDetails(userId, starLevel, isVisited) {
        //查询明细数据
        let inparams={};
        inparams.oldUserId=userId;
        inparams.status=status != null ? status.toString() : '';
        inparams.starLevel=starLevel != null ? starLevel.toString() : '';
        inparams.deptId=this.deptId;
        inparams.params={};
        if(starLevel==0){
          inparams.params.isStatus0=1;
        }
        inparams.specialParams={};
        inparams.specialParams.oldDistributeTime=this.timeGroup;
        inparams.params.isVisited= isVisited != null ? isVisited.toString() : '';
        inparams.pageNum=1;
        inparams.pageSize=10;
        this.$set(this.$data, 'form', inparams);
        this.open=true;
      },
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
.report_span1 {
  color: blue;
  cursor: pointer;
}
.report_span2 {
  color: rgb(231, 62, 146);
  cursor: pointer;
}
</style>
